<template>
  <div>
    <el-table v-loading="loading" :data="list" style="width: 100%" border>
      <el-table-column label="标题" align="center">
        <template slot-scope="scope">
          <router-link
            class="link"
            :to="{name: 'detail', params: {tid: scope.row._id}}"
          >{{scope.row.title}}</router-link>
        </template>
      </el-table-column>
      <el-table-column label="结帖" width="100" align="center">
        <template slot-scope="scope">
          <div>
            <el-tag v-if="scope.row.isEnd === '0'" type="success" effect="dark">未结</el-tag>
            <el-tag v-else type="danger" effect="dark">已结</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="发表时间" width="140" align="center">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{scope.row.created | moment}}</span>
        </template>
      </el-table-column>
      <el-table-column label="数据" width="180" align="center">
        <template slot-scope="scope">
          {{scope.row.reads}}
          <el-tag type="warning" effect="plain">阅</el-tag>
          /{{scope.row.answer}}
          <el-tag type="success" effect="plain">答</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="180" align="center">
        <template slot-scope="scope">
          <el-button
            @click="editPost(scope.row)"
            type="primary"
            size="small"
            plain
            :disabled="scope.row.isEnd === '1'"
          >编辑</el-button>
          <el-button type="danger" @click="deletePost(scope.row)" size="small" plain>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      layout="prev, pager, next"
      :total="total"
      v-if="total > 1"
      @current-change="handleCurrentChange"
      :current-page="current + 1"
    ></el-pagination>
  </div>
</template>

<script>
import { getPostListByUid, deletePostByUid } from '@/api/user'
import Pagination from '@/components/modules/pagination/Index'
export default {
  name: 'my-post',
  components: {
    'imooc-page': Pagination
  },
  data() {
    return {
      list: [],
      current: 0,
      limit: 10,
      total: 0,
      page: 0,
      loading: true
    }
  },
  mounted() {
    this.getPostList()
  },
  methods: {
    async getPostList() {
      const res = await getPostListByUid({
        page: this.current,
        limit: this.limit
      })
      if (res.code === 200) {
        this.loading = false
        this.list = res.data
        this.total = res.total
      }
    },
    deletePost(item) {
      this.$confirm(
        '确定要删除吗?',
        () => {
          if (item.isEnd !== '0') {
            this.$pop('shake', '帖子已结贴，无法删除')
            return
          }
          deletePostByUid({
            tid: item._id
          }).then(res => {
            if (res.code === 200) {
              this.$pop('', '删除成功')
              this.list.splice(this.list.indexOf(item), 1)
            } else {
              this.$pop('shake', res.msg)
            }
          })
        },
        () => {}
      )
    },
    handleCurrentChange(val) {
      this.current = val - 1
      this.getPostList()
    },
    editPost(item) {
      if (item.isEnd === '1') {
        this.$pop('shake', '帖子已经结贴，无法编辑')
      } else {
        this.$router.push({
          name: 'edit',
          params: { tid: item._id, page: item }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.overflow {
  overflow-y: auto;
}
.min-cell {
  min-width: 80px;
}
.layui-table-header {
  th {
    text-align: center;
    &:first-child {
      text-align: left;
    }
  }
}
</style>
